<template>
  <div class = "drawer-container">
    <div class = "drawer-item">
      <span>主题色</span>
      <!-- 主题组件 -->
      <theme-picker/>
    </div>
    <div class="drawer-item">
      <span>Open Tags-view</span>
      <el-switch v-model="tagsView" class="drawer-switch"></el-switch>
    </div>
    <div class="drawer-item">
      <span>Sidebar Logo</span>
      <el-switch v-model="showSidebarLogo" class="drawer-switch"></el-switch>
    </div>
  </div>
</template>

<script lang = "ts">
import { computed, defineComponent } from 'vue'
import ThemePicker from '../ThemePicker/index.vue'
import { useStore } from '@/store'
import { CHANGE_SETTING } from '@/store/modules/methods-type'

export default defineComponent({
  name: 'Settings',
  components: {
    ThemePicker
  },
  setup() {
    const store = useStore()
    const tagsView = computed({
      get() {
        return store.state.settings.tagsView
      },
      set(value) {
        store.dispatch(`settings/${CHANGE_SETTING}`, {key: 'tagsView', value})
      }
    })
    const showSidebarLogo = computed({
      get() {
        return store.state.settings.sidebarLogo
      },
      set(value) {
        store.dispatch(`settings/${CHANGE_SETTING}`, {key: 'sidebarLogo', value})
      }
    })

    return {
      tagsView,
      showSidebarLogo
    }
  }
})
</script>

<style lang = "scss" scoped>
.drawer-container {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .drawer-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    color: rgba(0, 0, 0, .65);
  }
}

</style>
